import {designPage, onMounted, useRefs} from "@peryl/react-compose";
import {usePageService} from "../../../modules/micro/usePageService";
import {i18n, Icon, Tooltip} from "plain-design";
import {useEchartsColor} from "../../../components/useEchartsColor";
import {RollingNumber} from "../../../common/RollingNumber";

export default designPage(() => {

  const { microApp } = usePageService();
  const { color1, color6 } = useEchartsColor();

  const { refs, onRef } = useRefs({ chartEl: HTMLDivElement });

  const browserData = new Array(24).fill(0).map(i => Math.ceil(Math.random() * 7) + 3);
  const total = browserData.reduce((prev, item) => prev + item, 0);

  onMounted(async () => {
    const echarts = await microApp.resource.load('echarts', window);
    const ins = echarts.init(refs.chartEl!);

    ins.setOption({
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
      },
      xAxis: [
        {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: new Array(24).fill(0).map(i => String(i))
        }
      ],
      yAxis: [
        {
          type: 'value',
          show: false,
          splitLine: { show: false },
        }
      ],
      series: [
        {
          name: 'Line 3',
          type: 'line',
          stack: '总量',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color1 },
              { offset: 1, color: color6 }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: browserData
        },
      ]
    });
  });

  return () => (
    <div className="pro-data-statistic-summary-card">
      <div className="pro-data-statistic-summary-card-title">
        <span>{i18n.$intl('page.dataStatistic.ProductVisit').d('商品访问')}</span>
        <Tooltip message={i18n.$intl('page.dataStatistic.more').d('更多')}>
          <Icon icon="pi-apps"/>
        </Tooltip>
      </div>
      <div className="pro-data-statistic-summary-card-result">
        <RollingNumber val={7555}/>
      </div>
      <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
      <div className="pro-data-statistic-summary">
        <span>{i18n.$intl('page.dataStatistic.DailyVisit').d('日访问量：')}</span>
        <span><RollingNumber val={total}/></span>
      </div>
    </div>
  );
});
